<script lang="ts" setup>
import { ref, watch } from 'vue';
import { trainingGetTrainingWork } from '/api/timetable';

const tabs = ref([
	{ id: '', name: '全部' },
	{ id: 0, name: '待完成' },
	{ id: 1, name: '已完成' },
]);
const currentTab = ref('');

watch(currentTab, fetchData, { immediate: true });

const list = ref([]);
async function fetchData() {
	uni.showLoading();
	const res = await trainingGetTrainingWork({ status: currentTab.value });
	uni.hideLoading();
	list.value = res?.data || [];
}
</script>

<template>
	<view class="T_page">
		<view class="T_tabs">
			<view v-for="item in tabs" :key="item.id" :class="{ 'T_tabs-active': currentTab === item.id }"
				@click="currentTab = item.id">{{ item.name }}</view>
		</view>
		<view class="list">
			<view v-for="item in list" :key="item.id"
				@click="uni.navigateTo({ url: `/pages/homeworkDetail/index?id=${item.id}` })">
				<view class="header">
					<text class="title">{{ item.trainingTheme || "--" }}</text>
					<uni-tag text="待完成" size="small" type="info" v-if="item.pxStatus === 0" />
					<uni-tag text="已完成" size="small" type="warning" v-else-if="item.pxStatus === 1" />
				</view>
				<view class="info">
					<view class="deadline">截止日期：{{ item.workEndTime || "--" }}</view>
					<view class="tag">
						<image src="/static/svg/read.svg" />
						<text>{{ item.moduleTitle || "--" }}</text>
					</view>
					<view class="user">
						<text>{{ item.trainingExpert || "--" }}</text>
						<uni-icons type="right" :size="uni.$rpxToPx(30)" color="#D1D5DB" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.T_page {
	display: grid;
	grid-template-rows: auto 1fr;
	padding: 0;
}

.list {
	overflow-y: auto;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;

	>view {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;

		>.header {
			display: grid;
			grid-template-columns: 1fr auto;
			gap: 20rpx;

			>.title {
				color: #1f2937;
			}
		}

		>.info {
			margin-top: 30rpx;
			color: #6b7280;
			font-size: 24rpx;

			>.tag {
				margin: 20rpx 0;
				display: flex;
				align-items: center;
				gap: 14rpx;

				>image {
					width: 24rpx;
					height: 24rpx;
				}
			}

			>.user {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #4B5563;
			}
		}
	}
}
</style>
